<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

  <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 16px; /* 设置默认字体大小 */
            line-height: 1.6; /* 设置默认行高 */
        }
        #userListContainer {
            width: 90%; /* 增加表格宽度 */
            margin: 20px auto;
            text-align: center;
        }
        #userListTitle {
            background-color: #4CAF50;
            color: white;
            padding: 15px; /* 增加标题的内边距 */
            margin-bottom: 30px; /* 增加标题和表格之间的间距 */
            border-radius: 8px;
            font-size: 24px; /* 增加标题的字体大小 */
        }
        #userTable {
            width: 100%;
            border-collapse: collapse;
            margin: auto;
            font-size: 18px; /* 增加表格内容的字体大小 */
        }
        #userTable th, #userTable td {
            border: 2px solid #ddd; /* 增加表格边框粗细 */
            padding: 15px; /* 增加单元格内边距 */
        }
        #userTable th {
            background-color: #f2f2f2;
        }
        .editButton {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px; /* 增加按钮的内边距 */
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px; /* 增加按钮的字体大小 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .editButton:hover {
            background-color: #45a049; /* 悬停时的背景色 */
        }
        
      
       
		/* 弹框样式 */
		 #editModal{
		    display: none;
		    position: fixed;
		    z-index: 1000;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%, -50%);
		    width: 500px;
		    height: 500px;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
		.modal-content .close{
		font-size:28px;
		margin-left:460px;
		cursor: pointer; /* 设置鼠标指针为小手 */
		}
		.modal-content h2{
		text-align:center;
		
		}
          #editForm {
            margin-top: 20px;
            text-align: left;
        }
        #editForm input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 20px;
        }
        label{
        font-size:23px;
        padding-left:10px;
        }
        #editForm .editSubmit {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 20px;
            margin-top: 10px;
            text-align:center;
            display: block;
            margin:auto;
        }
        #editForm .editSubmit:hover {
            background-color: #45a049;
        }
    </style>


</head>
<div id="userListContainer">
    <h2 id="userListTitle">用户列表</h2>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>电子邮件</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 用户数据将动态生成并插入到这里 -->
        </tbody>
    </table>
</div>



<!-- 编辑用户的弹框 -->
<div id="editModal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">&times;</span>
        <h2>编辑用户信息</h2>
        <form id="editForm">
            <input type="hidden" id="editUserId" name="userId">
            <label for="editUsername">用户名:</label><br>
            <input type="text" id="editUsername" name="editUsername"><br>
            <label for="editEmail">电子邮件:</label><br>
            <input type="text" id="editEmail" name="editEmail"><br>
            <label for="editPhone">电话:</label><br>
            <input type="text" id="editPhone" name="editPhone"><br>
            <input type="button" value="修改" class="editSubmit" onclick="submitEdit()">
        </form>
    </div>
</div>

</body>

<script>


$(document).ready(function() {
    // 页面加载完成后立即加载用户数据
    reloadUserData();

    // 编辑按钮点击事件绑定
    $('#userTable').on('click', '.editButton', function() {
        var userId = $(this).closest('tr').find('td:first').text(); // 获取用户ID
        var username = $(this).closest('tr').find('td:eq(1)').text(); // 获取用户名
        var email = $(this).closest('tr').find('td:eq(3)').text(); // 获取邮箱
        var phone = $(this).closest('tr').find('td:eq(4)').text(); // 获取电话
        openModal(userId, username, email, phone); // 打开编辑弹框并填充数据
    });
});

// 加载用户数据
function reloadUserData() {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/zhengshidazuoye/personal',
        dataType: 'json',
        success: function(res) {
            renderUserTable(res); // 渲染用户表格
        },
        error: function() {
            alert('Error fetching data.');
        }
    });
}

// 渲染用户表格
function renderUserTable(users) {
    var userTableBody = $('#userTable tbody');
    userTableBody.empty(); // 清空现有内容

    $.each(users, function(index, user) {
        var row = $('<tr></tr>');
        row.append('<td>' + user.id + '</td>');
        row.append('<td>' + user.username + '</td>');
        row.append('<td>' + user.password + '</td>'); // 注意：密码不应该直接显示在表格中
        row.append('<td>' + user.email + '</td>');
        row.append('<td>' + user.phone + '</td>');
        row.append('<td><button class="editButton">编辑</button></td>'); // 编辑按钮不再包含 onclick 属性
        userTableBody.append(row);
    });
}

// 打开编辑弹框，并填充用户信息
function openModal(userId, username, email, phone) {
    $('#editUserId').val(userId);
    $('#editUsername').val(username);
    $('#editEmail').val(email);
    $('#editPhone').val(phone);
    $('#editModal').css('display', 'block');
}

// 关闭编辑弹框
function closeModal() {
    $('#editModal').css('display', 'none');
}

// 提交编辑后的数据
function submitEdit() {
    var userId = $('#editUserId').val();
    var username = $('#editUsername').val();
    var email = $('#editEmail').val();
    var phone = $('#editPhone').val();

    var data = {
        userId: userId,
        username: username,
        email: email,
        phone: phone
    };

    $.ajax({
        type: 'post', // 使用 PUT 方法更新数据
        url: 'http://localhost:8080/zhengshidazuoye/personal',
        data: data,
        success: function(response) {
            alert('修改成功');
            closeModal();
            reloadUserData(); // 更新成功后重新加载数据
        },
        error: function(xhr, status, error) {
            alert('修改失败，请重试');
            console.error('AJAX Error: ' + status + ' - ' + error);
        }
    });
}

</script>
</html>